<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'ZhilengFuhe',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: ''
    }
  },
  created() {
    this.uniqueID = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale

    var option = {
      title: null,
      tooltip: null,
      legend: null,
      grid: {
        left: '3%',
        right: '5%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#A0C8DB',
              fontSize: 20
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4FC7FF'
            }
          },
          data: ['11-22', '11-23', '11-24', '11-25', '11-26', '11-27', '11-28']
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#A0C8DB',
              fontSize: 20
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4FC7FF'
            }
          }
        }
      ],
      series: [
        {
          name: '制冷负荷',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#5BFBCC',
              lineStyle: {
                color: '#5BFBCC',
                width: 1
              },
              areaStyle: {
                color: 'rgba(91, 251, 204, 0.5)',
                zlevel: 2
              }
            }
          },
          data: [4200, 4000, 3900, 4900, 4100, 4950, 4000],
          zlevel: 3,
          symbol: 'circle'
        }
      ]
    }

    myChart.setOption(option)

    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
